<template>
  <div>
    <el-table :data="tableData" style="width: 100%" @selection-change="xuan" ref="selection">
      <el-table-column type="selection" width="40" align="center" />
      <el-table-column property="id" label="ID" sortable width="80" />
      <el-table-column property="stuNo" label="学号" sortable />
      <el-table-column property="className" label="班级" />
      <el-table-column property="stuName" label="姓名" width="110" />
      <el-table-column property="collegeName" label="学院" width="110" />
      <el-table-column property="origin" label="市场部" />
      <el-table-column property="status" label="状态" />
      <el-table-column property="workCity" label="城市" width="100" />
      <el-table-column align="center">
        <template #header>
          <span>操作</span>
        </template>
        <template #default="scope">
          <el-button type="primary" size="small" @click="cha(scope.row)">查看</el-button>
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> 编辑 </el-button>
          <el-popconfirm
            confirm-button-text="Yes"
            cancel-button-text="No"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="确认删除吗?"
            @confirm="confirmEvent(scope.$index, scope.row)"
            @cancel="cancelEvent"
          >
            <template #reference>
              <el-button size="small" type="danger"> 删除 </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import { InfoFilled } from '@element-plus/icons-vue'
import { ElTable } from 'element-plus'

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['toworkcha', 'toworkedit', 'toworkdel', 'toworkxuan', 'toworkdelcancel'])
//查询
const cha = (val: any) => {
  console.log(val)
  emit('toworkcha', val)
}
//编辑
const handleEdit = (index: number, val: any) => {
  emit('toworkedit', index, val)
}
//删除
const confirmEvent = (index: number, val: any) => {
  emit('toworkdel', index, val)
}
//选择
const xuan = (selection: any) => {
  emit('toworkxuan', selection)
}
//取消删除
const cancelEvent = () => {
  emit('toworkdelcancel')
}
</script>

<style scoped>
</style>